<template>
  <div id="map-container"/>
  <a-modal v-model:visible="infoValue.show" title="新增点标记" @cancel="infoCancel" @ok="addMarker">
    {{ infoValue.lng }}
    <a-input ref="infoTitle" v-model:value="infoValue.title" placeholder="名称" @keyup.enter="addMarker"/>
  </a-modal>
</template>

<script setup>
import {createVNode, nextTick, onMounted, reactive, ref, shallowRef} from "vue";
import img from "@/assets/base-image-camera.png";
import {MapAddApi, MapListApi, MapRemoveApi} from "@/common/customs/mapView";
import {message, Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import AMapLoader from "@amap/amap-jsapi-loader"

window._AMapSecurityConfig = {
  securityJsCode: "8845d95f9a8e661e3f022da7afd80390", // 应用生成的秘钥
};

const infoValue = reactive({
  title: "",
  lng: [],
  show: false,
});
const infoTitle = ref();
// let AMap = null;
let mapInstance = shallowRef(null);
let markers = [];
const center = [120.631946, 27.983144];
let infoWindow = ref();
const state = reactive({
  map: null,
  marker: null,
});
const infoCancel = () => {
  infoValue.show = false;
  infoValue.lng = [];
  infoValue.title = "";
};

const addMarker = async () => {
  // mapInstance.setZoom(18);
  if (infoValue.title) {
    const api = new MapAddApi();
    api.params({
      jd: infoValue.lng[0],
      wd: infoValue.lng[1],
      name: infoValue.title,
    });
    await api.send();
    getList();
    infoCancel();
  }
};

const getList = async () => {
  const api = new MapListApi();
  await api.send();
  const {data} = await api.getDatas();
  const icon = new AMap.Icon({
    size: new AMap.Size(50, 50),
    // image: "@/assets/base-image-camera.png",
    image: img,
    imageOffset: new AMap.Pixel(0, 0),
    imageSize: new AMap.Size(50, 50),
  });
  [[120.631826, 27.981588],
    [120.632307, 27.98164],
    [120.632321, 27.981918],
    [120.632258, 27.982826],
    [120.631674, 27.982826],
    [120.631389, 27.983074],
    [120.631345, 27.983479],
    [120.632476, 27.983491],].forEach((dataKey) => {
    // if (dataKey.wd === null) {
    //   return;
    // }
    let marker = new AMap.Marker({
      icon,
      // draggable: true,
      // cursor: "move",
      position: dataKey,
      offset: new AMap.Pixel(-25, -25),
    });
    // marker.content = dataKey.name;
    // marker.id = dataKey.id;
    // marker.on("dragend", (e) => {
    //   // console.log("移动了", e, dataKey.id);
    //   // console.log(markers);
    //   request({
    //     url: "api/jwdedit"
    //   }, {}, {
    //     id: dataKey.id,
    //     jd: e.lnglat.lng,
    //     wd: e.lnglat.lat
    //   });
    // });
    // marker.on("dblclick", (e) => {
    //   removeMarker(marker);
    // });
    // marker.on("click", () => {
    //   infoWindow.value.setContent(dataKey.name);
    //   infoWindow.value.open(state.map, marker.getPosition());
    // });
    markers.push(marker);
    state.map.add(markers);
    // state.map.invalidate()
  });
};

const initMap = () => {
  AMapLoader.load({
    key: "010362433d4f2df1e7c46540a54c7676",
    version: "2.0",
  }).then((AMap)=>{

    mapInstance.value = new AMap.Map('map-container', {
      viewMode: "3D",
      pitch: 45,
      rotation: 0,
      zooms: [17, 19],
      pitchEnable: false,
      rotateEnable: false,
      zoom: 18,
      center,
    });
    console.log(mapInstance,mapInstance.value,'---------');

    state.map = new AMap.Map('map-container', {
      viewMode: "3D",
      pitch: 45,
      rotation: 0,
      zooms: [17, 19],
      pitchEnable: false,
      rotateEnable: false,
      zoom: 18,
      center,
    });
    infoWindow.value = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30), closeWhenClickMap: true});
    state.map.on("click", (event) => {
      console.log(`${event.lnglat.getLng()}, ${event.lnglat.getLat()}`);
      infoValue.lng = [event.lnglat.getLng(), event.lnglat.getLat()];
      infoValue.show = true;
      nextTick(() => {
        infoTitle.value.focus();
      });
    });
    // var styleName = "amap://styles/blue";
    // state.map.setMapStyle(styleName);
    getList();
  })
  // mapInstance = new AMap.Map("map-container", {
  //   viewMode: "3D",
  //   pitch: 45,
  //   rotation: 0,
  //   zooms: [17, 19],
  //   pitchEnable: false,
  //   rotateEnable: false,
  //   zoom: 18,
  //   center,
  // });

};

const removeMarker = (data) => {
  let index = markers.indexOf(data);
  Modal.confirm({
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode("div", {style: "color:red;"}, `确认删除${data.content}?`),
    onOk: async () => {
      const api = new MapRemoveApi();
      api.params({id: data.id,});
      await api.send();
      const {code} = await api.getDatas();
      if (index > -1 && code === 0) {
        infoWindow.value.close();
        markers[index].remove();
        markers.splice(index, 1);
      } else {
        message.error("失败");
      }
    },
    onCancel() {
      console.log("Cancel");
    },
    class: "test",
  });
};
onMounted(() => {
  initMap();
});

</script>

<style scoped>
#map-container {
  width: 100%;
  height: 100%;
}
</style>
